<template>
  <a-card :bordered='false'>
    <div style='border-left: 2px solid #d7d5d5;padding-left: 10px;'
         v-if='$store.state.user.info.userType === "00"'>
      此按钮仅协会用户可见 (仅作调试)
      <br>
      <a-space>
        <a-button size='small' @click='add'>切换</a-button>
        <a-button size='small' @click='reset'>重置</a-button>
        <a-button size='small' @click='wait'>等待0</a-button>
        <a-button size='small' @click='fail'>失败1</a-button>
        <a-button size='small' @click='fail2'>失败2</a-button>
        <a-button size='small' @click='success'>成功3</a-button>
      </a-space>
    </div>
    
    
    <!--录取文字-->
    <a-result :title='statusTitleFilter(formData.enrollStatus)'>
      <!--录取的图标-->
      <template #icon>
        <!--{{ statusIconFilter(enrollStatus) }}-->
        <a-icon :type='statusIconFilter(formData.enrollStatus).type'
                :theme='statusIconFilter(formData.enrollStatus).theme'
                :two-tone-color='statusIconFilter(formData.enrollStatus)["two-tone-color"] || ""' />
      </template>
      
      
      <div class='content'>
        
        <a-row class='row-i'>
          
          <a-col :xs='24' :sm='12' :md='12' :lg='12' :xl='6'>
            <span style='color: rgba(0, 0, 0, 0.85)'>题目提交时间: </span>
            {{ formData.subTime || '未进行提交' }}
          </a-col>
          
          <a-col :xs='24' :sm='12' :md='12' :lg='12' :xl='6'>
            <span style='color: rgba(0, 0, 0, 0.85)'>题目评分负责人: </span>
            <a> {{ formData.judger || '未进行评分' }}</a>
          </a-col>
          
          <!--<a-col :xs='24' :sm='12' :md='12' :lg='12' :xl='6'>
            <span style='color: rgba(0, 0, 0, 0.85)'>二轮面试时间: {{ SecondRoundTime }}</span>
            <br>
            <span style='color: rgba(0, 0, 0, 0.85)'>二轮面试地点: {{ formData.SecondRoundInfo.location }}</span>
          
          </a-col>
          
          <a-col :xs='24' :sm='12' :md='12' :lg='12' :xl='6'>
            <span style='color: rgba(0, 0, 0, 0.85)'>部门内决策 <a-icon type='message' /></span>
          </a-col>-->
        
        </a-row>
        
        
        <!--进度条下面的步骤 title标题 slot='description'描述 -->
        <a-steps
          :current='formData.index'
          :direction='isMobile && directionType.vertical || directionType.horizontal' progressDot>
          
          <!--第一步-->
          <a-step>
            <template slot='title'>
              提交解题
              <a-icon type='code' />
            </template>
            <template slot='description'>
              <div class='step-desc'
                   slot='description'>
                <div style='margin: 8px 0 4px'>
                  提交人: {{ formData.nickName }}
                </div>
              </div>
            </template>
          </a-step>
          
          <!--第二步 status="error"表示评分未通过-->
          <a-step :status="formData.judgeResult === '1' ? 'error' : ''">
            
            <template slot='title'>
              进行评分
              <a-icon type='safety-certificate' />
            </template>
            <template slot='description'>
              <div
                style='margin: 8px 0 4px'
                class='step-desc'
                slot='description'>
                {{ formData.judgeResult === '0' ? '进行中' : (formData.judgeResult === '1' ? '评分未通过' : '评分通过') }}
              </div>
            </template>
          </a-step>
          <!--第三步 :status="formData.interviewResult === '1' ? 'error' : ''"-->
          <a-step :title="'结果整理'">
            
            <template slot='description'>
              <div
                style='margin: 8px 0 4px'
                class='step-desc'
                slot='description'>
                <!--{{formData.interviewResult === '0' ? '进行中' : (formData.judgeResult === '1' ? '面试未通过' : '面试通过')}}-->
              </div>
            </template>
          </a-step>
          <!--第四步-->
          <a-step>
            <template slot='title'>
              录取成功
            </template>
            <template slot='description' v-if='formData.interviewResult === "2"'>
              <div
                style='margin: 8px 0 4px'
                class='step-desc'
                slot='description'>
                <a-icon type='smile' theme='twoTone' two-tone-color='#52c41a' />
                恭喜您
              </div>
            </template>
          </a-step>
        </a-steps>
      </div>
      
      <template #extra>
        <a-button type='primary'>确认</a-button>
        <a-button style='margin-left: 8px'>返回首页</a-button>
      </template>
    </a-result>
  </a-card>
</template>

<script>
import { baseMixin } from '@/store/app-mixin'
import { getEnrollSetInfo, getEnrollStepInfo } from '@/api/newcomer'


const enrollStatusMap = {
  '0': {
    status: 'processing',
    title: '录取正在有条不紊的进行中🏃🏼‍',
    icon: {
      type: 'info-circle',
      theme: 'twoTone'
    }
  },
  '1': {
    status: 'error',
    title: '很遗憾 您未被录取',
    icon: {
      type: 'smile',
      theme: 'twoTone'
    }
  },
  '2': {
    status: 'success',
    title: '️恭喜您 您已被广州应用科技学院计算机协会录取',
    icon: {
      type: 'check-circle',
      theme: 'twoTone',
      'two-tone-color': '#52c41a'
    }
  }
}

const directionType = {
  horizontal: 'horizontal',
  vertical: 'vertical'
}

export default {
  name: 'Success',
  mixins: [baseMixin],
  data() {
    this.directionType = directionType
    return {
      formData: {
        index: 0,
        enrollStatus: '0', // "0"进行中  "1"录取成功  "2"录取未通过
        subTime: '2023-10-26 16:58:00',
        nickName: '浩浩',
        judger: '谢天浩',
        SecondRoundInfo: {
          date: '2023-10-27',
          start: '9:00:00',
          end: '17:30:00',
          location: 'S1-706'
        },
        judgeResult: '0',     // 评分结果 "0"进行中 "1"未通过 "2":评分通过
        interviewResult: '0'  // 面试结果 "0"进行中 "1"未通过 "2":面试通过
      }
    }
  },
  created() {
    // 为协会内用户时仅作调试功能
    if (this.$store.state.user.info.userType !== '00') {
      this.getEnrollInfo()
    }
    
  },
  computed: {
    SecondRoundTime() {
      // 去掉后面的":00"
      let start = this.formData.SecondRoundInfo.start.substring(0, this.formData.SecondRoundInfo.start.length - 3)
      let end = this.formData.SecondRoundInfo.end.substring(0, this.formData.SecondRoundInfo.end.length - 3)
      return this.formData.SecondRoundInfo.date + '(' + start + '-' + end + ')'
    }
  },
  methods: {
    // 获取录取步骤的信息
    getEnrollInfo() {
      getEnrollStepInfo().then(response => {
        this.formData = response.data
      })
    },
    // 切换步骤
    add() {
      this.formData.index++
      if (this.formData.index === 3) {
        this.formData.enrollStatus = '2'
      }
    },
    // 重置步骤
    reset() {
      this.formData.index = 0
      this.formData.enrollStatus = '0'
      this.formData.judgeResult = '0'
      this.formData.interviewResult = '0'
    },
    // 步骤1:等待
    wait() {
      this.formData.enrollStatus = '0'
    },
    // 步骤4:成功
    success() {
      this.formData.enrollStatus = '2'
      this.formData.index = 3
    },
    // 步骤2:失败结果1
    fail() {
      this.formData.judgeResult = '1' // 评分结果
      this.formData.enrollStatus = '1'
      this.formData.index = 1
    },
    // 步骤2:失败结果2
    fail2() {
      this.formData.interviewResult = '1' // 面试结果
      this.formData.enrollStatus = '1'
      this.formData.index = 2
    },
    statusTitleFilter(type) {
      return enrollStatusMap[type].title
    },
    statusIconFilter(type) {
      return enrollStatusMap[type].icon
    }
  }
}
</script>

<style scoped lang='less'>
.content {
  .info {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 20px;
  }
  
  .row-i {
    margin-bottom: 16px
  }
  
  .step-desc {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    position: relative;
    left: 42px;
    text-align: left;
  }
}
</style>
